import { Chart, Axis, Geom, Coord, Legend, Guide, Tooltip } from 'bizgoblin';

const defs = [{
  dataKey: 'count',
  nice: true,
}];

const pixelRatio = window.devicePixelRatio * 2;

function PieChart(props) {

  const { data, colors } = props

  return (
    <>
      <Chart width="88px" height="88px" data={data} defs={defs} pixelRatio={pixelRatio} padding={[-4, -4, 14, -4]}>
        <Coord type="polar" transposed radius={0.85} />
        <Legend position='bottom' offsetY={100} />
        <Tooltip offsetY={50} />
        <Geom
          geom="interval"
          position="1*count"
          color={['name', colors]}
          adjust="stack"
          style={{
            lineWidth: 1,
            stroke: '#fff',
            lineJoin: 'round',
            lineCap: 'round',
          }}
        />
      </Chart>
    </>
  )
}

export default PieChart